import React from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import Icon from '@/components/Icon'
import Img from '@/components/Img'

import dayjs from 'dayjs'
import relactiveTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
import { useDispatch, useSelector } from 'react-redux'
import { setMoreAction } from '@/store/actions/home'
// 扩展dayjs, 有显示相对时间的功能
dayjs.extend(relactiveTime)
dayjs.locale('zh-cn')


export default function ArticleItem({ article, channelId }) {
	const dispatch = useDispatch()
	const isLogin = useSelector(state => !!state.login.token)

    const { cover: { type, images }, pubdate, title, aut_name, comm_count } = article
	return (
		<div className={styles.root}>
			<div className={classnames('article-content', { t3: type === 3, 'none-mt': type === 0})}>
				<h3>{title}</h3>
				{type !== 0 && (
					<div className="article-imgs">
						{images.map((item, i) => (
							<div className="article-img-wrapper" key={i}>
								<Img src={item} alt="" />
							</div>
						))}
					</div>
				)}
			</div>

            <div className={classnames('article-info',type === 0 ? 'none-mt' : '')}>
                <span>{aut_name}</span>
                <span>{comm_count} 评论</span>
                {/* fromNow() 指定的时间距离当前时间多久 */}
                <span>{dayjs(pubdate).fromNow()}</span>

                <span className="close">
                    { isLogin&&(<Icon type="iconbtn_essay_close" onClick={() => dispatch(setMoreAction({
						visible: true,
						articleId: article.art_id,
						channelId: channelId
					}))}/>) }
                </span>
            </div>
		</div>
	)
}
